<template>
  <div class="sliding">
    <div class="sliding-mask" v-show="showSlide" :class="{'fade-enter-active': enter, 'fade-leave-active': leave}"></div>
    <article class="slide-pop" v-show="showSlide" :class="{'slide-enter-active': enter, 'slide-leave-active': leave}">
      <span class="close" @click="hideSlide">
            <i class="iconfont icon-close_circle_line"></i>
      </span>
      <div class="slide-bd slide-notitle">
        <article class="demontable-container">
          <div class="navigation after-bd-b">
            <nav class="nav">
              <a href="javascript:;" class="item after-bd-b needsclick cur">
                {{title}}
                <span>(可左右拖拽查看)</span>
              </a>
            </nav>
          </div>
          <section class="demon-table">
            <header class="demon-hd after-bd-b">
              <div class="atribute">
                <div class="left">
                  <div  class="ages">
                    <div class="year">年度</div>
                    <div class="year-age">年龄</div>
                  </div>
                </div>
                <div class="main" ref="hdMain">
                  <div class="slide" ref="hdSlide" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px);">
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].seriousIllness !== ''">重疾保险金</div>
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].mildIllness !== '' && mainPolPid !== 'P0018'">轻症保险金</div>
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].death !== ''">身故保险金</div>
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].accidentMedical !== ''">意外伤害医疗保险金</div>
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].commonAccidents !== ''">意外伤残/身故保险金</div>
                    <!--<div class="column" style="width: 140px;" v-if="sheetData['0'].commonAccidents !== ''">意外身故保险金</div>-->
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].car">交通意外(汽车)保险金</div>
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].train">交通意外(列车)保险金</div>
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].ship">交通意外(轮船)保险金</div>
                    <div class="column" style="width: 170px;" v-if="sheetData['0'].airplane">交通意外(民航班机)保险金</div>
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].accidentAllowance !== ''">意外住院津贴保险金</div>
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].Hospitalization !== ''">住院费用保险金</div>
                    <div class="column" style="width: 190px;" v-if="sheetData['0'].mildCardioDisease !== ''">特定心脑血管轻症疾病保险金</div>
                    <div class="column" style="width: 190px;" v-if="sheetData['0'].servereCardioDisease !== ''">特定心脑血管重大疾病保险金</div>
                    <div class="column" style="width: 180px;" v-if="sheetData['0'].cardioDeath !== ''">身故保险金(心脑血管疾病)</div>
                    <div class="column" style="width: 140px;" v-if="sheetData['0'].cashValue !== ''">现金价值</div>
                  </div>
                </div>
              </div>
              <div class="markbar"></div>
            </header>
            <div class="demon-detail" ref="demonDetail" :style="{height: contentHeight}">
              <div class="left">
                <div class="line" v-for="(item, index) in sheetData" :key="index">
                  <div class="item">{{item.year}}</div>
                  <div class="item">{{item.age}}</div>
                </div>
              </div>
              <div class="main" ref="bdMain">
                <div class="slide" ref="bdSlide" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px);">
                  <div class="row" v-for="(item, index) in sheetData" :key="index">
                    <div class="col" style="width: 140px;" v-if="item.seriousIllness !== ''">{{item.seriousIllness || sheetData[0].seriousIllness}}</div>
                    <div class="col" style="width: 140px;" v-if="item.mildIllness !== '' && mainPolPid !== 'P0018'">{{item.mildIllness ? `${item.mildIllness}~${item.mildIllness * 3}` : `${ sheetData[0].mildIllness}~${ sheetData[0].mildIllness * 3}`}}</div>
                    <div class="col" style="width: 140px;" v-if="item.death !== ''">{{item.death || sheetData[0].death}}</div>
                    <div class="col" style="width: 140px;" v-if="item.accidentMedical !== ''">{{item.accidentMedical || sheetData[0].accidentMedical}}</div>
                    <div class="col" style="width: 140px;" v-if="item.commonAccidents !== ''">{{item.commonAccidents || sheetData[0].commonAccidents}}</div>
                    <!--<div class="col" style="width: 140px;" v-if="item.commonAccidents !== ''">{{item.commonAccidents || sheetData[0].commonAccidents}}</div>-->
                    <div class="col" style="width: 140px;" v-if="item.car">{{item.car}}</div>
                    <div class="col" style="width: 140px;" v-if="item.train">{{item.train}}</div>
                    <div class="col" style="width: 140px;" v-if="item.ship">{{item.ship}}</div>
                    <div class="col" style="width: 170px;" v-if="item.airplane">{{item.airplane}}</div>
                    <div class="col" style="width: 140px;" v-if="item.accidentAllowance !== ''">{{item.accidentAllowance ? `${item.accidentAllowance * 10}/日` : `${sheetData[0].accidentAllowance * 10}/日`}}</div>
                    <div class="col" style="width: 140px;" v-if="item.Hospitalization !== ''">{{planObj[item.Hospitalization] || planObj[sheetData[0].Hospitalization]}}</div>
                    <div class="col" style="width: 190px;" v-if="item.mildCardioDisease !== ''">{{item.mildCardioDisease || sheetData[0].mildCardioDisease}}</div>
                    <div class="col" style="width: 190px;" v-if="item.servereCardioDisease !== ''">{{item.servereCardioDisease || sheetData[0].servereCardioDisease}}</div>
                    <div class="col" style="width: 180px;" v-if="item.cardioDeath !== ''">{{item.cardioDeath || sheetData[0].cardioDeath}}</div>
                    <div class="col" style="width: 140px;" v-if="item.cashValue !== ''">{{item.cashValue}}</div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </article>
      </div>
    </article>
  </div>
</template>

<script>
import BSscroll from 'better-scroll'
export default {
  props: ['show', 'sheetData', 'title', 'mainPolPid'],
  name: 'sheet',
  data () {
    return {
      enter: false,
      leave: false,
      showSlide: false,
      contentHeight: '',
      transformX: 0,
      scroll: null,
      planObj: {
        90400: '计划一',
        177200: '计划二',
        349000: '计划三'
      }
    }
  },
  mounted () {
    this.contentHeight = window.innerHeight * 0.9 - 100 + 'px'
    this.mainTouchMove(this.$refs.bdMain, this.$refs.hdSlide, this.$refs.hdMain, this.$refs.bdSlide)
  },
  methods: {
    hideSlide () {
      this.$emit('sheetStatus', !this.show)
    },
    mainTouchMove (touchEl, moveEl, touchEl2, moveEl2) {
      let scroll = new BSscroll(touchEl, {
        scrollX: true,
        scrollY: false,
        preventDefault: false,
        probeType: 3
      })
      scroll.on('scroll', (position) => {
        let x = position.x
        moveEl.style.transform = `translate(${x}px, 0px) scale(1) translateZ(0px)`
      })
      let scroll2 = new BSscroll(touchEl2, {
        scrollX: true,
        scrollY: false,
        preventDefault: false,
        probeType: 3
      })
      scroll2.on('scroll', (position) => {
        let x = position.x
        moveEl2.style.transform = `translate(${x}px, 0px) scale(1) translateZ(0px)`
      })
      // scroll2.on('scroll', (position) => {
      //   let x = position.x
      //   scroll.scrollTo(x, 0)
      // })
      // this.scroll = new BSscroll(moveEl, {
      //   scrollX: true,
      //   scrollY: false
      // })
      // let startX
      // let moveX
      // let $this = this
      // let sheetNum = 0
      // for (let item in this.sheetData['0']) {
      //   if (this.sheetData['0'][item]) {
      //     sheetNum++
      //   }
      // }
      // let bodyWidth = window.screen.width - 112 - (sheetNum - 2) * 140
      // touchEl.addEventListener('touchstart', function (ev) {
      //   startX = ev.touches[0].clientX
      //   touchEl.addEventListener('touchmove', function (ev) {
      //     moveX = ev.touches[0].clientX
      //     let x = (moveX - startX) / 35
      //     let transformX = $this.transformX + x
      //     if (transformX <= 0 && transformX >= bodyWidth) {
      //       $this.transformX = transformX + x
      //       touchEl.style.transform = `translate(${$this.transformX}px, 0px) scale(1) translateZ(0px)`
      //       moveEl.style.transform = `translate(${$this.transformX}px, 0px) scale(1) translateZ(0px)`
      //     }
      //   })
      // })
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.enter = true
        this.showSlide = val
        document.body.style.position = 'fixed'
        setTimeout(() => {
          this.enter = false
        }, 500)
      } else {
        this.leave = true
        document.body.style.position = ''
        setTimeout(() => {
          this.showSlide = val
          this.leave = false
        }, 200)
      }
    },
    sheetData (val) {
      console.log(val)
    }
  }
}
</script>

<style scoped>
  .sliding {
    position: fixed;
    z-index: 999;
  }
  .sliding-mask {
    top: 0;
    z-index: 1000;
    height: 100%;
    background: rgba(0,0,0,.6);
    transform-style: preserve-3d;
  }
  .slide-pop, .sliding-mask {
    position: fixed;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
  }
  .slide-pop {
    z-index: 1001;
    top: 10%;
    bottom: 0;
    background-color: #fff;
  }
  .slide-pop .close {
    top: -45px!important;
    color: #fff!important;
  }
  .slide-pop .close {
    z-index: 1001;
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .slide-pop .close i {
    font-size: 24px;
  }
  .slide-pop .slide-bd {
    height: 100%;
    border-top: 45px solid #fff;
    font-size: 13px;
    line-height: 20px;
    -webkit-overflow-scrolling: touch;
  }
  .slide-pop .slide-notitle {
    border-top: 0;
  }
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
  }
  .slide-enter-active {
    animation: fadeInUp .3s
  }

  .slide-leave-active {
    animation: fadeInDown .3s
  }

  .fade-enter-active {
    animation: fadeIn .5s
  }

  .fade-leave-active {
    animation: fadeOut .5s
  }
  @keyframes fadeOut {
    0% {
      opacity: 1
    }
    to {
      opacity: 0
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes fadeInDown {
    0% {
      opacity: 1;
      transform: none
    }
    to {
      opacity: 0;
      transform: translate3d(0, 100%, 0)
    }
  }
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translate3d(0, 100%, 0)
    }
    to {
      opacity: 1;
      transform: none
    }
  }
  .demontable-container {
    background-color: #fff;
    user-select: none;
  }
  .after-bd-b, .after-bd-r {
    position: relative;
  }
  .navigation {
    overflow-x: scroll;
    width: 100%;
    height: 60px;
    background: #fff;
    white-space: nowrap;
  }
  .navigation {
    margin-bottom: -1px;
  }
  .navigation .nav {
    height: 60px;
    line-height: 40px;
    text-align: center;
    font-size: 0;
  }
  .navigation .nav .item {
    position: relative;
    width: 90%;
    height: 100%;
    display: inline-block;
    font-size: 15px;
    background-color: #fff;
    color: #999;
    outline: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .dialog .dialog-fd>a, .navigation .nav .cur {
    color: #5081dc;
    line-height: 30px;
  }
  .dialog .dialog-fd>a, .navigation .nav .cur span{
    display: block;
    color: #cacaca;
    line-height: 20px;
  }
  .navigation .nav a {
    position: relative;
    width: 33.3%;
    height: 100%;
    display: inline-block;
    padding: 0 10px;
    font-size: 16px;
    color: #999;
    background-color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .navigation .nav .item:before {
    z-index: 2;
    content: "";
    position: absolute;
    bottom: 0;
    opacity: 0;
    left: 41%;
    width: 18%;
    height: 4px;
    border-radius: 100px;
  }
  .navigation .nav a:before {
    z-index: 1;
    content: "";
    position: absolute;
    bottom: 0;
    opacity: 0;
    left: 41%;
    width: 18%;
    height: 4px;
    border-radius: 100px;
  }
  .navigation .nav .cur:before {
    opacity: 1;
  }
  .navigation .nav .cur:before {
    background-color: #5081dc;
  }
  .after-bd-b:after {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }
  .after-bd-b:after, .after-bd-r:after {
    position: absolute;
    background: #e5e5e5;
    content: "";
    pointer-events: none;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  :link, :visited {
    text-decoration: none;
  }
  .demon-table {
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
  }
  .demon-table .demon-hd {
    margin-bottom: -1px;
  }
  .demontable-container .demon-table .atribute {
    background-color: #f6ffff;
  }
  .demon-table .atribute {
    display: table;
    width: 100%;
    height: 40px;
    line-height: 40px;
  }
  .demon-table .atribute .left .ages {
    display: flex;
    width: 112px;
    border-right: 1px solid #e5e5e5;
  }
  .demon-table .atribute .left .year-age, .demon-table .atribute .left .year {
    flex: 1;
  }
  .demon-table .atribute .left .year {
    border-right: 1px solid #e5e5e5;
  }
  .demon-table .main {
    overflow: hidden;
    position: relative;
    display: table-cell;
    touch-action: pan-y pinch-zoom;
    -webkit-tap-highlight-color: transparent;
  }
  .demon-table .main .slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    margin-left: -1px;
    font-size: 0;
    white-space: nowrap;
  }
  .demon-table .atribute .column {
    display: inline-block;
    width: 98px;
    text-align: center;
    font-size: 14px;
    border-right: 1px solid #e5e5e5;
  }
  .demon-table .demon-detail {
    overflow-y: auto;
    width: 100%;
    height: 300px;
  }
  .demon-table .left {
    display: table-cell;
    width: 112px;
    text-align: center;
  }
  .demon-table .demon-detail .main {
    width: 100%;
  }
  .demon-table .demon-detail .row {
    display: flex;
    white-space: nowrap;
  }
  .demon-table .demon-detail .line:first-child {
    position: relative;
  }
  .demon-table .demon-detail .line, .demon-table .demon-detail .row {
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #e5e5e5;
  }
  .demon-table .demon-detail .line {
    width: 112px;
    display: flex;
  }
  .demon-table .left .line:nth-child(2n) {
    background-color: #fffcfb;
  }
  .demon-table .demon-detail .col {
    width: 98px;
    text-align: center;
  }
  .demon-table .demon-detail .col, .demon-table .demon-detail .item {
    /*flex: 1;*/
    height: 40px;
    min-width: 56px;
    line-height: 40px;
    border-right: 1px solid #e5e5e5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .demon-table .demon-detail .line:first-child:before {
    z-index: 1;
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    transform: scaleY(.5);
    transform-origin: 0 0;
    pointer-events: none;
    background-color: #e5e5e5;
    left: 0;
    top: 0;
  }
  .demon-table .demon-detail .row:first-child:before {
    z-index: 1;
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    transform: scaleY(.5);
    transform-origin: 0 0;
    pointer-events: none;
    background-color: #e5e5e5;
    left: 0;
    top: 0;
  }
  .demon-table:before {
    z-index: 1;
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    transform: scaleY(.5);
    transform-origin: 0 0;
    pointer-events: none;
    background-color: #e5e5e5;
    left: 0;
    top: 0;
  }
  *, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>
